<template>
  <div class="person-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="dpp">
        <span slot="label">
          <i class="el-icon-s-order"></i>&nbsp;待铺派
        </span>
        <div class="form">
          <el-form
            :inline="true"
            label-position="right"
            label-width="120px"
            :model="dpp"
            class="demo-form-inline"
          >
            <el-form-item label="项目名称">
              <el-input v-model="dpp.projectName" placeholder="请填写项目名称"></el-input>
            </el-form-item>
            <el-form-item label="权利人">
              <el-input v-model="dpp.qlr" placeholder="请填写权利人"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="dpp.idCard" placeholder="请填写身份证号"></el-input>
            </el-form-item>

            <el-form-item label="所在区县">
              <el-select width="185" v-model="dpp.districtId" placeholder="--请选择--">
                <el-option
                  v-for="(item,index) in qxList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库备案时间">
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择开始日期"
                    v-model="dpp.storingRecordTimeFrom"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">至</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择截至日期"
                  v-model="dpp.storingRecordTimeTo"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('dpp')">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <div class="table-box">
            <xTable
              :loading="loading"
              checkbox
              :head="dppHead"
              :tableData="dppTableData"
              :search="dpp"
              @on-changePage="(v)=>getData(v)"
              :total="dppTotal"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="ypp">
        <span slot="label">
          <i class="el-icon-s-claim"></i>&nbsp;已铺派
        </span>
        <div class="form">
          <el-form
            :inline="true"
            label-position="right"
            label-width="120px"
            :model="ypp"
            class="demo-form-inline"
          >
            <el-form-item label="项目名称">
              <el-input v-model="ypp.projectName" placeholder="请填写项目名称"></el-input>
            </el-form-item>
            <el-form-item label="权利人">
              <el-input v-model="ypp.qlr" placeholder="请填写权利人"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="ypp.idCard" placeholder="请填写身份证号"></el-input>
            </el-form-item>

            <el-form-item label="所在区县">
              <el-select width="185" v-model="ypp.districtId" placeholder="--请选择--">
                <el-option
                  v-for="(item,index) in qxList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库备案时间">
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择开始日期"
                    v-model="ypp.storingRecordTimeFrom"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">至</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择截至日期"
                  v-model="ypp.storingRecordTimeTo"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('ypp')">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <div class="table-box">
            <xTable
              :loading="loading"
              checkbox
              :head="yppHead"
              :tableData="yppTableData"
              :search="ypp"
              @on-changePage="(v)=>getData(v)"
              :btn="btn"
              @on-qdClick="qdClick"
              @on-qxClick="qxClick"
              :total="yppTotal"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import { setTimeout } from "timers";
import {
  getList,
  queryAllDistrict,
  getYppList,
  getDppList
} from "@/api/project/xmkgh/xmspread";
import { formatDateTime } from "@/utils/index.js";
export default {
  components: {
    xTable
  },
  data() {
    return {
      qxList: [],
      btn: {
        qd: { name: "确定", way: "on-qdClick" },
        qx: { name: "取消", way: "on-qxClick" }
      },
      loading: true,
      activeName: "dpp",
      dpp: {
        page: 1,
        size: 10
      },
      ypp: {
        page: 1,
        size: 10
      },
      dppHead: {
        projectName: "项目名称",
        projectLocation: "项目所在地",
        qlr: "权利人",
        storingRecordStartTime: "入库备案时间",
        jsjsy: "减少建设用地面积（公顷）",
        a: "铺派年份"
      },
      yppHead: {
        projectName: "项目名称",
        projectLocation: "项目所在地",
        qlr: "权利人",
        storingRecordStartTime: "入库备案时间",
        jsjsy: "减少建设用地面积（公顷）",
        a: "铺派年份"
      },
      yppTableData: [],
      dppTableData: [],
      yppTotal: null,
      dppTotal: null
    };
  },
  methods: {
    onSubmit(data) {
      if (data == "dpp") {
        var dppFrom = this.dpp.storingRecordTimeFrom;
        var dppTo = this.dpp.storingRecordTimeTo;
        if (dppFrom) {
          this.dpp.storingRecordTimeFrom = formatDateTime(dppFrom);
        }
        if (dppTo) {
          this.dpp.storingRecordTimeTo = formatDateTime(dppTo);
        }
        this.getData(this.dpp);
      } else if (data == "ypp") {
        var yppFrom = this.ypp.storingRecordTimeFrom;
        var yppTo = this.ypp.storingRecordTimeTo;
        if (yppFrom) {
          this.ypp.storingRecordTimeFrom = formatDateTime(yppFrom);
        }
        if (yppTo) {
          this.ypp.storingRecordTimeTo = formatDateTime(yppTo);
        }
        this.getData(this.ypp);
        console.log(this.ypp);
      }
    },
    qdClick(item) {
      console.log(item);
    },
    qxClick(item) {
      console.log(item);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData(data) {
      console.log(data)
      getYppList(this.ypp).then(rs => {
        this.loading = false;
        this.yppTableData = rs.data.rows;
        this.yppTotal = rs.data.total;
      });
      getDppList(this.dpp).then(rs => {
        this.loading = false;
        this.dppTableData = rs.data.rows;
        this.dppTotal = rs.data.total;
      });
    }
  },
  created() {
    this.getData();
    queryAllDistrict().then(rs => {
      this.qxList = rs.data;
      this.qxList.unshift({ id: 0, name: "--不限--" });
    });
  }
};
</script>

<style lang="scss" scoped>
.person-container {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}
.table,
.table-box {
  margin-top: 20px;
  .block {
    float: right;
    margin: 30px;
  }
}
.line {
  text-align: center;
}
</style>
<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
}
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>
